<template>
	<view>
		<h1>1111</h1>
		{{msg}}
		<!-- <view class="play-container">
			<view :style="{}"></view>
			<view class="play-img" @click="detail">
				<view><image class="img" :src="msg.album.picUrl" mode=""></image></view>
				<view class="play-name">{{ msg.name }}</view>
			</view>
			<view class="play-icon" @click="onclik">
				<u-icon v-if="code" name="play-circle" color="#000" size="28"></u-icon>
				<u-icon v-else name="pause" color="#000" size="28"></u-icon>
			</view>
			<view class="play-icon-1"><u-icon name="grid-fill" color="#000" size="28"></u-icon></view>
		</view> -->
	</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex';//vuex
export default {
	data() {
		return {
			msg:''
		};
	},
	onLoad() {
		uni.$on('list',(data)=>{
			console.log("全局事件",data)
		})
		this.msg = uni.getStorageSync("playmusic")
		console.log(this.msg);
	},
	methods: {
		onclik() {
			this._player()
			this._playaudio()
			this._playandstop()
		},
		detail() {
			uni.navigateTo({
				url: `/components/play/music_detail`
			});
		},
		...mapMutations(['_player',"_playaudio","_playandstop"])
	},
	updated() {},
	computed: {
		...mapState({
			name: state => state.songs.name,//歌名
			picurL: state => state.songs.picUrl,//歌图
			mp3: state => state.songs.mp3Url,//歌MP3
			code: state => state.songs.player,//
			Audio:state=>state.player.Audio,//audio实例对象
		})
	}
};
</script>
<style lang="scss" scoped>
.play-container {
	width: 750rpx;
	height: 110rpx;
	border-radius: 10rpx;
	background: linear-gradient(220deg, #909193, #9acafc);
	display: flex;
	align-items: center;
	position: fixed;
	bottom: 100rpx;
	.play-img {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		.img {
			width: 90rpx;
			height: 90rpx;
			border-radius: 10rpx;
			margin-left: 20rpx;
		}
		.play-name {
			width: 250rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-size: 33rpx;
			margin-left: 30rpx;
		}
	}
	.play-icon {
		position: fixed;
		right: 100rpx;
		justify-content: flex-end;
		align-items: flex-end;
	}
	.play-icon-1 {
		position: fixed;
		right: 20rpx;
		justify-content: flex-end;
		align-items: flex-end;
	}
}
</style>
